<!DOCTYPE html><html lang="zh-CN"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五神鸟数字艺术珍藏馆</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background-color: #0a1a35;
      color: white;
      font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
      width: 1920px;
      min-height: 100vh;
      overflow-x: hidden;
    }
    
    /* 数字流背景动画 */
    @keyframes codeFlow {
      0% { background-position: 0 0; }
      100% { background-position: 100% 0; }
    }
    
    /* 玻璃卡片效果 */
    .glass-card {
      background: rgba(10, 26, 53, 0.4);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(212,175,55,0.5);
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 
                  0 0 0 1px rgba(212,175,55,0.4);
    }
    
    .hover-glow:hover {
      box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
    }
    
    /* 旋转动画 */
    @keyframes rotate {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(360deg); }
    }
    
    .rotating {
      animation: rotate 20s linear infinite;
    }
    
    .active-glow {
      box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
      transition: box-shadow 0.3s ease;
    }
    
    .calligraphy-font {
      font-family: 'Ma Shan Zheng', serif;
    }
    
    /* 导航栏 */
    .navbar {
      height: 8vh;
      min-height: 60px;
      background: rgba(10, 26, 53, 0.85);
      backdrop-filter: blur(10px);
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
    }
    
    /* 页头区域 */
    .page-header {
      height: 30vh;
      min-height: 250px;
      background: linear-gradient(135deg, #050a18 0%, #0a1a35 50%, #101f3c 100%);
      position: relative;
      overflow: hidden;
      margin-top: 8vh; /* 为导航栏留出空间 */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }
    
    /* 展廊区域 */
    .gallery-container {
      height: 55vh;
      min-height: 500px;
      position: relative;
    }
    
    /* 藏品卡片 */
    .artifact-card {
      position: relative;
      transition: all 0.5s ease;
    }
    
    .artifact-card::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgba(212,175,55,0.05)' d='M50,50 C50,50 150,50 150,50 C150,50 150,150 150,150 C150,150 50,150 50,150 C50,150 50,50 50,50 Z M100,60 C120,60 140,70 140,90 C140,110 120,120 100,120 C80,120 60,110 60,90 C60,70 80,60 100,60 Z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 20%;
      opacity: 0.7;
      z-index: -1;
    }
    
    /* 页脚 */
    .page-footer {
      height: 10vh;
      min-height: 60px;
      background: #0a1a35;
    }
    
    /* 导航点 */
    .nav-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1.5px solid #d4af37;
      transition: all 0.3s ease;
    }
    
    .nav-dot.active {
      background: #d4af37;
      transform: scale(1.2);
    }
    
    .collection-btn {
      transition: all 0.3s ease;
    }
    
    .collection-btn:hover {
      transform: rotate(15deg) scale(1.15);
    }
    
    .border-gold {
      border: 1px solid rgba(212, 175, 55, 0.5);
    }
    
    .border-gold-top {
      border-top: 1px solid rgba(212, 175, 55, 0.3);
    }
  </style>
</head>
<body class="relative">
  <!-- 导航栏 -->
  <nav class="navbar flex items-center px-8">
    <div class="calligraphy-font text-3xl text-[#d4af37]">五神鸟</div>
    
    <div class="flex-1 flex justify-center">
      <a href="首頁.html" class="px-5 py-2 mx-2 text-white hover:text-[#d4af37] transition">首页</a>
      <a href="神鳥傳説界面.html" class="px-5 py-2 mx-2 text-white hover:text-[#d4af37] transition">神鸟传说</a>
      <a href="科技神韻界面.html" class="px-5 py-2 mx-2 bg-[rgba(212,175,55,0.2)] border border-[#d4af37] rounded-md text-[#d4af37]">科技互动</a>
      <a href="文化传承.html" class="px-5 py-2 mx-2 text-white hover:text-[#d4af37] transition">文化传承</a>
      <a href="关于我们.html" class="px-5 py-2 mx-2 text-white hover:text-[#d4af37] transition">关于我们</a>
    </div>
    
    <div class="flex items-center">
      <!-- <button class="text-[#d4af37] p-2 rounded-full hover:bg-[rgba(212,175,55,0.2)]">
        <span class="iconify w-6 h-6" data-icon="mdi:magnify"></span>
      </button>
      <button class="ml-4 text-white px-3 py-1 border border-[#d4af37] rounded-md hover:bg-[rgba(212,175,55,0.2)]">
        中文
      </button> -->
    </div>
  </nav>
  
  <!-- 页面头部 -->
  <header class="page-header flex flex-col justify-center items-center" style="padding-top: 10vh; position: relative; overflow: hidden;">
    <!-- 星空背景和动画效果 -->
    <div class="absolute inset-0 overflow-hidden" style="z-index: 0;">
      <div id="starfield" class="absolute inset-0"></div>
    </div>
    <div class="calligraphy-font text-7xl text-[#d4af37] tracking-wider" style="text-shadow: 0 0 18px rgba(212, 175, 55, 0.7); position: relative; z-index: 2;">神鸟·永恒典阁</div>
    <div class="mt-4 text-3xl text-white" style="text-shadow: 0 0 12px rgba(255, 255, 255, 0.7); position: relative; z-index: 2;">收藏永恒，传承文化记忆</div>
  </header>
  
  <!-- 展廊区域 -->
  <main class="gallery-container flex justify-center items-center relative" style="background-image: url(''); background-size: cover; min-height: 700px;">
    <!-- 数字流动背景效果 -->
    <div class="absolute inset-0 overflow-hidden" style="z-index: 0; opacity: 0.2;">
      <div class="absolute inset-0" style="background-image: repeating-linear-gradient(transparent, transparent 30px, rgba(0,200,200,0.1) 30px, rgba(0,200,200,0.1) 60px); animation: codeFlow 40s linear infinite;"></div>
      <div id="binary-effect" class="absolute inset-0"></div>
    </div>
    
    <!-- 展品画廊 - 水平布局五神鸟 -->
    <div class="flex w-full max-w-6xl justify-center items-center mx-auto gap-10 relative" style="height: 70%; left: 120px; position: relative;">
      <div class="flex flex-row items-center justify-center w-[70%] relative z-10" id="gallery-track" style="transition: transform 0.6s cubic-bezier(.77,.2,.05,1.0);">
        <!-- 展品1 （最左，最小） -->
        <div class="artifact-card glass-card border border-gold rounded-xl w-56 h-72 mx-2 opacity-70 transform scale-90 flex-shrink-0 flex flex-col justify-end z-10">
          <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
            <img id="38" src="青色.png" alt="Divine bird artifact artwork" class="w-36 h-36 rotating">
          </div>
          <div class="absolute bottom-0 w-full px-2 py-2 bg-[rgba(0,0,0,0.7)] rounded-b-xl text-center">
            <div class="calligraphy-font text-base text-white">【发明·舞风】</div>
            <div class="text-xs text-white mt-1">限量882份</div>
          </div>
        </div>
        <!-- 展品2（左中，较小） -->
        <div class="artifact-card glass-card border border-gold rounded-xl w-64 h-80 mx-2 opacity-80 transform scale-95 flex-shrink-0 flex flex-col justify-end z-20">
          <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
            <img id="73" src="红色焦明.png" alt="Phoenix divine bird digital collection" class="w-44 h-44 rotating">
          </div>
          <div class="absolute bottom-0 w-full px-3 py-3 bg-[rgba(0,0,0,0.7)] rounded-b-xl text-center">
            <div class="calligraphy-font text-lg text-[#d4af37]">【焦明·燎原】</div>
            <div class="text-xs text-white mt-1">限量发行1000份</div>
          </div>
        </div>
        <!-- 展品3（中心，最大） -->
        <div class="artifact-card glass-card border-2 border-[#d4af37] rounded-xl w-80 h-96 mx-2 relative active-glow flex-shrink-0 flex flex-col justify-end z-30">
          <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
            <img id="45" src="彩色凤凰.png" alt="Digital artifact with divine bird" class="w-60 h-60 rotating">
          </div>
          <div class="absolute bottom-0 w-full px-5 py-4 bg-[rgba(0,0,0,0.7)] rounded-b-xl text-center">
            <div class="calligraphy-font text-2xl text-[#d4af37]">【凤凰·破虚】</div>
            <div class="text-sm text-white mt-1">限量751份</div>
          </div>
        </div>
        <!-- 展品4（右中，较小） -->
        <div class="artifact-card glass-card border border-gold rounded-xl w-64 h-80 mx-2 opacity-80 transform scale-95 flex-shrink-0 flex flex-col justify-end z-20">
          <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
            <img src="黑色悠长.png" alt="Yellow bird digital artifact" class="w-44 h-44 rotating">
          </div>
          <div class="absolute bottom-0 w-full px-3 py-3 bg-[rgba(0,0,0,0.7)] rounded-b-xl text-center">
            <div class="calligraphy-font text-lg text-white">【幽昌·吟天】</div>
            <div class="text-xs text-white mt-1">限量627份</div>
          </div>
        </div>
        <!-- 展品5（最右，最小） -->
        <div class="artifact-card glass-card border border-gold rounded-xl w-56 h-72 mx-2 opacity-70 transform scale-90 flex-shrink-0 flex flex-col justify-end z-10">
          <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
            <img src="白色.png" alt="White phoenix digital artifact" class="w-36 h-36 rotating">
          </div>
          <div class="absolute bottom-0 w-full px-2 py-2 bg-[rgba(0,0,0,0.7)] rounded-b-xl text-center">
            <div class="calligraphy-font text-base text-white">【鹔鹴·霜华】</div>
            <div class="text-xs text-white mt-1">限量599份</div>
          </div>
        </div>
      </div>
      <!-- 藏品详情卡片（右移加宽，高度减少） -->
      <div class="glass-card w-[560px] h-[400px] flex flex-col justify-center items-center ml-40 z-10" id="detail-card">
        <div class="p-8 border-gold-top w-full text-center flex flex-col justify-center items-center">
          <h3 class="text-2xl mb-4 text-[#d4af37] calligraphy-font" id="detail-title">藏品详情</h3>
          <!-- <p class="text-base mb-5" id="detail-author">创作者：AI艺术工作室 x 故宫文化</p> -->
          <p class="text-base mb-5" id="detail-edition">发行日期：2025.10.01 | 编号：#0587/1000</p>
          <p class="text-base mb-5" id="detail-desc">
            烈火涅槃生，百禽朝拜
          </p>
          <div class="flex items-center justify-center mt-auto pt-6 text-base">
            <span class="iconify mr-2 text-[#d4af37]" data-icon="mdi:blockchain"></span>
            区块链存证
          </div>
        </div>
      </div>
    </div>
    <!-- 左右箭头居中偏下方 -->
    <div class="absolute left-1/2 -translate-x-1/2 bottom-32 flex items-center gap-16 z-20">
      <button class="w-14 h-14 flex items-center justify-center glass-card hover-glow" id="arrow-left">
        <span class="iconify w-10 h-10 text-[#d4af37]" data-icon="mdi:arrow-left-bold"></span>
      </button>
      <button class="w-14 h-14 flex items-center justify-center glass-card hover-glow" id="arrow-right">
        <span class="iconify w-10 h-10 text-[#d4af37]" data-icon="mdi:arrow-right-bold"></span>
      </button>
    </div>
    <!-- 我的藏馆入口移到左下角 -->
    <div class="fixed left-12 bottom-16 z-30">
      <div class="collection-btn flex flex-col items-center">
        <div class="w-16 h-16 rounded-full bg-[#d4af37] bg-opacity-20 flex items-center justify-center mb-2 hover:bg-opacity-30 hover:border hover:border-[#d4af37]">
          <span class="iconify text-3xl text-[#d4af37]" data-icon="mdi:seal"></span>
        </div>
        <div class="calligraphy-font text-lg text-[#d4af37]">我的藏馆</div>
      </div>
    </div>
    <!-- 导航点 -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex space-x-3 z-10">
      <div class="nav-dot"></div>
      <div class="nav-dot"></div>
      <div class="nav-dot active"></div>
      <div class="nav-dot"></div>
      <div class="nav-dot"></div>
    </div>
  </main>
  
  <!-- 页脚 -->
  <footer class="page-footer flex items-center justify-between px-12 border-gold-top">
    <div class="flex items-center">
      <div class="calligraphy-font text-2xl text-[#d4af37] mr-3">五神鸟</div>
      <div class="text-sm text-gray-300">© 2025 五神鸟数字艺术馆 </div>
    </div>
    
    <div class="flex space-x-4 text-sm text-gray-300">
      <a href="#" class="hover:text-[#d4af37]">隐私政策</a>
      <span>|</span>
      <a href="#" class="hover:text-[#d4af37]">用户协议</a>
      <span>|</span>
      <a href="关于我们.html" class="hover:text-[#d4af37]">联系我们</a>
    </div>
    
    <div class="flex space-x-4">
      <a href="https://mp.weixin.qq.com/s/Gd91N-0lKqXblMExLEWIxw" class="text-[#d4af37] hover:text-white">
        <span class="iconify w-6 h-6" data-icon="mdi:wechat"></span>
      </a>
      <a href="https://weibo.com" class="text-[#d4af37] hover:text-white">
        <span class="iconify w-6 h-6" data-icon="mdi:weibo"></span>
      </a>
      <a href="https://www.douban.com" class="text-[#d4af37] hover:text-white">
        <span class="iconify w-6 h-6" data-icon="mdi:douban"></span>
      </a>
    </div>
  </footer>

  <script>
    // 创建星空背景
    document.addEventListener('DOMContentLoaded', function() {
      // 创建二进制数字背景效果
      function createBinaryEffect() {
        const binaryEffect = document.getElementById('binary-effect');
        const BINARY_COUNT = 100;
        
        for (let i = 0; i < BINARY_COUNT; i++) {
          setTimeout(() => {
            createBinaryElement();
          }, i * 200);
        }
        
        setInterval(() => {
          createBinaryElement();
        }, 600);
        
        function createBinaryElement() {
          const binary = document.createElement('div');
          const digit = Math.random() > 0.5 ? '0' : '1';
          const x = Math.random() * 100;
          const y = Math.random() * 5;
          const size = Math.random() * 12 + 8;
          const opacity = Math.random() * 0.3 + 0.05;
          const duration = Math.random() * 15 + 10;
          
          binary.textContent = digit;
          binary.style.position = 'absolute';
          binary.style.color = 'rgba(0, 255, 255, ' + opacity + ')';
          binary.style.left = x + '%';
          binary.style.top = y + '%';
          binary.style.fontSize = size + 'px';
          binary.style.fontFamily = 'monospace';
          binary.style.fontWeight = 'bold';
          binary.style.textShadow = '0 0 5px rgba(0, 255, 255, 0.3)';
          binary.style.animation = `fallDown ${duration}s linear forwards`;
          
          const keyframes = `
            @keyframes fallDown {
              0% { transform: translateY(0); opacity: ${opacity}; }
              80% { opacity: ${opacity}; }
              100% { transform: translateY(${Math.random() * 1000 + 1000}px); opacity: 0; }
            }
          `;
          
          const styleSheet = document.createElement('style');
          styleSheet.textContent = keyframes;
          document.head.appendChild(styleSheet);
          
          binaryEffect.appendChild(binary);
          
          // 二进制元素结束后移除
          setTimeout(() => {
            binary.remove();
            styleSheet.remove();
          }, duration * 1000);
        }
      }
      
      createBinaryEffect();
      // 星空背景创建函数
      function createStarfield() {
        const starfield = document.getElementById('starfield');
        const STAR_COUNT = 150;
        const METEOR_PROBABILITY = 0.02; // 流星出现概率
        
        // 创建星星
        for (let i = 0; i < STAR_COUNT; i++) {
          const star = document.createElement('div');
          star.className = 'star';
          
          // 随机星星位置和大小
          const size = Math.random() * 2;
          const opacity = Math.random() * 0.8 + 0.2;
          const x = Math.random() * 100;
          const y = Math.random() * 100;
          
          star.style.width = `${size}px`;
          star.style.height = `${size}px`;
          star.style.left = `${x}%`;
          star.style.top = `${y}%`;
          star.style.opacity = opacity;
          star.style.position = 'absolute';
          star.style.borderRadius = '50%';
          star.style.backgroundColor = 'white';
          star.style.boxShadow = `0 0 ${size + 1}px rgba(255, 255, 255, 0.8)`;
          
          // 添加闪烁动画
          const animationDuration = 2 + Math.random() * 3;
          star.style.animation = `twinkle ${animationDuration}s ease-in-out infinite alternate`;
          
          starfield.appendChild(star);
        }
        
        // 创建流星效果
        setInterval(() => {
          if (Math.random() > METEOR_PROBABILITY) return;
          
          const meteor = document.createElement('div');
          meteor.className = 'meteor';
          
          const startX = Math.random() * 80 + 10;
          const startY = Math.random() * 20;
          
          meteor.style.position = 'absolute';
          meteor.style.left = `${startX}%`;
          meteor.style.top = `${startY}%`;
          meteor.style.width = '1px';
          meteor.style.height = '1px';
          meteor.style.backgroundColor = 'white';
          meteor.style.boxShadow = '0 0 5px 1px white';
          meteor.style.transform = 'rotate(45deg)';
          meteor.style.opacity = '0';
          
          // 流星轨迹
          const angle = Math.random() * 20 + 20; // 20-40度角
          const distance = 30 + Math.random() * 30;
          const duration = 0.8 + Math.random() * 1;
          
          meteor.style.animation = `meteor ${duration}s ease-in forwards`;
          
          // 创建流星CSS动画
          const keyframes = `
            @keyframes meteor {
              0% {
                opacity: 0;
                transform: translate(0, 0) rotate(${angle}deg) scale(0.5);
              }
              5% {
                opacity: 1;
              }
              90% {
                opacity: 1;
                box-shadow: 0 0 5px 1px white, 0 0 10px 1px rgba(255, 255, 255, 0.5), 0 0 30px 10px rgba(255, 255, 255, 0.2);
              }
              100% {
                transform: translate(${distance}vw, ${distance}vh) rotate(${angle}deg) scale(0.1);
                opacity: 0;
              }
            }
            
            @keyframes twinkle {
              0% { opacity: 0.2; }
              100% { opacity: 1; }
            }
          `;
          
          const styleSheet = document.createElement('style');
          styleSheet.textContent = keyframes;
          document.head.appendChild(styleSheet);
          
          starfield.appendChild(meteor);
          
          // 流星结束后移除
          setTimeout(() => {
            meteor.remove();
            styleSheet.remove();
          }, duration * 1000);
        }, 2000);
      }
      
      createStarfield();
      
      // 激活卡片发光效果
      const cards = document.querySelectorAll('.artifact-card');
      const navDots = document.querySelectorAll('.nav-dot');
      let currentIndex = 2; // 默认朱雀激活
      function activateCard(card, index) {
        cards.forEach((c, i) => {
          c.classList.remove('active-glow', 'border-2', 'border-[#d4af37]');
          c.style.zIndex = '1';
          c.style.transform = 'scale(0.75)';
          c.style.opacity = '0.75';
        });
        card.classList.add('active-glow', 'border-2', 'border-[#d4af37]');
        card.style.zIndex = '3';
        card.style.transform = 'scale(1)';
        card.style.opacity = '1';
        navDots.forEach(dot => dot.classList.remove('active'));
        navDots[index].classList.add('active');
        currentIndex = index;
        updateDetailPanel(index);
        // gallery-track滑动动画，居中高亮
        const galleryTrack = document.getElementById('gallery-track');
        const offset = (index - 2) * 180; // 2为中间卡片索引
        galleryTrack.style.transform = `translateX(${-offset}px)`;
      }
      function updateDetailPanel(index) {
        const titles = ["发明·舞风", "焦明·燎原", "凤凰·破虚", "幽昌·吟天", "鹔鹴·霜华"];
        const descriptions = [
          "驭光创昼夜，明察秋毫",
          "巧构天地巢，鸣通神意",
          "烈火涅槃生，百禽朝拜",
          "司春启希望，仁德信使",
          "振翅降寒霜，净佑四方"
        ];
        const editions = ["882", "1000", "751", "627", "599"];
        document.getElementById('detail-title').textContent = "【" + titles[index] + "】";
        // document.getElementById('detail-author').textContent = "创作者：AI艺术工作室 x 故宫文化";
        document.getElementById('detail-edition').textContent = "发行日期：2025.10.01 | 编号：#" + Math.floor(Math.random() * editions[index]) + "/" + editions[index];
        document.getElementById('detail-desc').textContent = descriptions[index];
      }
      // 卡片点击
      cards.forEach((card, index) => {
        card.addEventListener('click', () => activateCard(card, index));
      });
      // 左右箭头点击滑动
      document.getElementById('arrow-left').addEventListener('click', function() {
        const newIndex = (currentIndex - 1 + cards.length) % cards.length;
        activateCard(cards[newIndex], newIndex);
      });
      document.getElementById('arrow-right').addEventListener('click', function() {
        const newIndex = (currentIndex + 1) % cards.length;
        activateCard(cards[newIndex], newIndex);
      });
      // 导航点点击
      navDots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
          activateCard(cards[index], index);
        });
      });
      // 自动轮换
      setInterval(() => {
        const newIndex = (currentIndex + 1) % cards.length;
        activateCard(cards[newIndex], newIndex);
      }, 8000);
    });
  </script>

</body></html>